<div id="content">
    	       <h2>APPOINTMENTS FORMS</h2>
        <div class="clear"></div>
  </div> 
<?php if (!empty($this->message)):?>
	<div class="errorbox">
		<?php
			if (is_array($this->message))
			{ 
				foreach ($this->message as $item)
					echo "<p>$item</p>";					
			}
			else 
				echo "<p>$this->message</p>";			
		?>
	</div>
<?php endif;?>
<div id="content">
    	  <form name="mainForm" id="mainForm" class="myform" method="post" action="">
<table class="childtable" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td valign="top">
  
      <table width="100%" border="0">
        <tr>
          <td><div style="padding-top:5px;;padding-left:10px;border:#900 1px solid;background-color:#CCC;height:40px;line-height:25px;color:#900;font-size:14px;font-weight:bold">Booking For Customer:
    	<input type="text" name="txt_appoint_customer" id=txt_appoint_customer size="50">
    	<input type="hidden" name="appoint_customer" value="-1" id="appoint_customer">
    	<?php 
    		  $dateFormatForJavaScript = 'd-m-Y';	
    		  $dateTmp = empty($this->data['appoint_date'])?date($dateFormatForJavaScript,time()):$this->data['appoint_date']; 
    		  $dateTmpInt = strtotime($dateTmp);
    		  $dateTmp = date($dateFormatForJavaScript,$dateTmpInt);    			
    	 ?>
    	 <span style="color: blue;font-size: 11px;font-weight: 100"><a class="modalInput" rel="#prompt">[Add New Customer]</a></span>
           Date: <input type="date" name='appoint_date' id='appoint_date' value='<?php echo $dateTmp; ?>'>
          </div></td>
          </tr>
<!-- Phan vung moi lam -->
<tr><td>
	<h3 id = "foundlabel" style="color:blue"></h3>
	<table id="danhsachtimduoc" style="display:none" class="listCustomer" width="100%" border="0"  cellspacing="0" cellpadding="0">
		<tr>
			<th></th>
			<th>Name</th>
			<th>Phone</th>
			<th>Email</th>
		</tr>
	</table>
</td></tr>
<!-- Ket Thuc Phan vung moi lam -->          
        <tr>
        <td valign="top" width="200px">
	<h3>Note: </h3>
    <textarea rows="3" name="appoint_description" id="appoint_description" style="width: 98%"><?php echo $this->data['appoint_description']?></textarea>
</td>
        </tr>  
        <tr>
          <td><h2>Detail Jobs:</h2></td>
          </tr>
        <tr>
          <td>
 <!-- Job Detail -->
	 		<div class="log">
	 		
	 		</div>
            <table id="customerlistbox" class="listCustomer" width="100%" border="0"  cellspacing="0" cellpadding="0">
            <tr>
               <th scope="col" class='center' width="30px">No.</th>
               <th width="120px" scope="col">Employee Name</th>
    		   <th scope="col">For Services</th>
    		   <th scope="col" width="120px">Start Time</th>
    		   <th scope="col" width="120px">End Time</th>
    		   <th width="120px" scope="col">Command</th>
   			   <th scope="col" width="120px">More</th>
            </tr>
 <?php
 $irowCount = 0;
 if (isset($this->data['data'])): 
 	foreach ($this->data['data'] as $dataJobRow):
 	 $irowCount++;
 ?>
            <tr id="key_<?php echo $irowCount?>" <?php echo $irowCount%2==0?"class='row2'":"" ?>>
              <td class='center'><?php echo $irowCount?></td>
		      <td><?php echo $this->employeeListSelect("appoint_".$irowCount."_employee",$dataJobRow['employee']);?></td>
		      <td><?php echo $this->servicesListSelect("appoint_".$irowCount."_services",$dataJobRow['services']);?></td>
		      <td><?php echo $this->timeSelect("appoint_".$irowCount."_startime",$dataJobRow['start_time'])?></td>
		      <td><?php echo $this->timeSelect('appoint_'.$irowCount.'_endtime',$dataJobRow['end_time'])?></td>
		      <td><a class='delRow' onclick="delRow('<?php echo $irowCount?>')">Delete This Row</a></td>
		      <td><p onclick="showTableHtml('<?php echo $irowCount;?>')">More Employee</p></td>
			 </tr>
  <?php endforeach;?>
<?php 
else:
$irowCount++;
?>   
  			<tr id="key_<?php echo $irowCount?>" <?php echo $irowCount%2==0?"class='row2'":"" ?>>
		      <td class='center'><?php echo $irowCount?></td>
		      <td><?php echo $this->employeeListSelect("appoint_".$irowCount."_employee");?></td>
		      <td><?php echo $this->servicesListSelect("appoint_".$irowCount."_services");?></td>
		      <td><?php echo $this->timeSelect("appoint_".$irowCount."_startime",null)?></td>
		      <td><?php echo $this->timeSelect('appoint_'.$irowCount.'_endtime',null)?></td>
		      <td><a class='delRow' onclick="delRow('<?php echo $irowCount?>')">Delete This Row</a></td>
		      <td><p onclick="showTableHtml('key_<?php echo $irowCount;?>')">More Employee</p></td>
			 </tr>
<?php endif;?>
          </table>
 <!-- Job Detail End -->
          </td>
          </tr>
       	  <tr><td><input type="submit" value="Save Booking Form" /></td></tr>	
      </table></td>

</tr>   
    
</table>
<div id="chanhenry"></div>
<input type="hidden" name="appoint_delRow" id="appoint_delRow">

</form>      
        <div class="clear"></div> 
  </div>
  
 <!-- Goi Ajax tai day -->
 <br>
 <div><button class="showcasecalender" id="showbytime">Show By Time</button> - <button class="showcasecalender" id="showbycustomer">Show By Customer</button>
 </div>
 <div id="bookinglist">
 </div>
 <!-- Goi Ajax tai day --> 
 <div class="modal myform" id="prompt">
	<h2>Add New Customer</h2>
	<div id="errorcustomer" style="color: red;margin-top: 3px"></div>
	<!-- input form. you can press enter too -->
	<form id="customerForm" method="post" >
		<table class="childtable" style="margin-top: 10px" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100px" align="right">First Name</td>
    <td width="31%" align="left"><input value="" type="text" class="required" id="customer_fname"  name="customer_fname" size="40" /></td>
    <td width="44%" colspan="2" rowspan="6" valign="top" align="left">
    <h3 style="margin:5px 0">About My Customer</h3>
    <textarea cols="45" id="customer_description" name="customer_description" rows="6"></textarea>
    <div style="margin-top: 10px">   
    	<button type="submit" name="btnSave" >Save </button>
		<button type="button" class="close">Close</button>
	</div> 	
    </td>
    </tr>
  <tr>
    <td align="right">Last Name</td>
    <td align="left">
    	<input value="" type="text" id="customer_lname" name="customer_lname" size="40" class="required"  />
    	</td>
    </tr>
  <tr>
    <td>Email 
      </td>
     <td><input id="customer_email" name="customer_email" size="40" type="text" class="email" /></td> 
    </tr>
  <tr>
    <td>Phone </td>
     <td><input type="text" value="" id="customer_phone" name="customer_phone" size="40" /></td> 
    </tr>  
   <tr>
    <td>Address</td>
     <td><input value="" type="text" id="customer_address" name="customer_address" size="40" /></td> 
    </tr> 
	 <tr>
    <td>Birth Day </td>
     <td><input type="text" value="" name="customer_birthday" id="customer_birthday" size="40" /></td> 
    </tr>  
    </table>
		
	</form>
	<br />
</div>
  
  <script>
  function renderadio_id(object){
		$("#appoint_customer").val(object.value);
	}
	 
  //Xu ly script ngay thang
      <?php
	  		$dateTmpInt; 
	  ?>
	  $.ajaxSetup ({
		    cache: false
		});
			  
	var yeartmp = <?php echo date('Y',$dateTmpInt);?>;  
	var monthtmp = <?php echo date('m',$dateTmpInt)?>;
	var daytmp = <?php echo date('d',$dateTmpInt)?>;
	var str = daytmp+'-'+monthtmp+'-'+yeartmp;
	url = '<?php echo $this->baseUrl()?>/index/showlistbydate?date='+str;
	$.get(
		    url,
			function(data) { 
				$('#bookinglist').html(data);
			},
		    "html"
	);	
  	var myDate=new Date();
  	myDate.setFullYear(yeartmp,(monthtmp-1),daytmp);
	$(":date").dateinput({
		format:'dd-mm-yyyy',
		value: myDate,
		min:-1,
		max:180		
	}).change(function(event, date) 
	{
		var day = date.getDate();
		var month = date.getMonth()+1;
		var year = date.getFullYear();
		var str = day+'-'+month+'-'+year;
		url = '<?php echo $this->baseUrl()?>/index/showlistbydate?date='+str;
		$.get(
			    url,
				function(data) { 
					$('#bookinglist').html(data);
				},
			    "html"
		);	
	});

	$icount = <?php echo ($irowCount)?>;	
	function showTableHtml(keyItem)
	{
		var Item_Tr_id = keyItem.substr(keyItem.length-1,1);
		var empId = $("#appoint_"+Item_Tr_id+"_employee").val();
		var serId = $("#appoint_"+Item_Tr_id+"_services").val();
		var startTime = $('#appoint_date').val()+" "+$("#appoint_"+Item_Tr_id+"_startime_hour").val()+":"+$("#appoint_"+Item_Tr_id+"_startime_min").val() ;
		var endTime = $('#appoint_date').val()+" "+$("#appoint_"+Item_Tr_id+"_endtime_hour").val()+":"+$("#appoint_"+Item_Tr_id+"_endtime_min").val() ;
		var url =  "<?php echo $this->baseUrl()?>/index/get-more-employee/currentrow/"+(++$icount);
		$(".log").ajaxSend(function(e, xhr, settings) {
			if (url == settings.url)
			{
		   	 	$(this).text('Data loading ...');
			}
		});
		$.get(
			    url,					
				function(data) { 
					$('#customerlistbox').append(data);
					$(".log").text('');			
				},
			    "html"
		);		
	}
	
	$(".delRow").attr('title',"Note: If have one row cannot delete");
	function delRow(item)
	{
		$("#appoint_delRow").val(item);
		document.mainForm.submit();
	}

	// Overplay Customer Form

	var triggers = $(".modalInput").overlay({
		// some mask tweaks suitable for modal dialogs
		onClose:function(){
			$("#customerForm").resetForm();
		},
		mask: {
			color: '#ebecff',
			loadSpeed: 200,
			opacity: 0.9
		},
		closeOnClick: false
	});

	var urlSaveCustomer = '<?php echo $this->baseUrl()?>/customer/saveforajax';
	var options = {
	        url: urlSaveCustomer,
	        type: 'post'  // pre-submit callback	       
	    };
	$("#txt_appoint_customer").ajaxComplete(function(e, xhr, settings) 
  	{
  		if (urlSaveCustomer == settings.url)
  		{
  	  		var res = eval('(' + xhr.responseText + ')');
  			if (res.success)
  			{  	  	
	  			$(".modalInput").overlay().close();
		   	 	$(this).val(res.data.customer_fname + " "+res.data.customer_lname);
		   	 	$("#appoint_customer").val(res.data.customer_id);
		   	 	$("#danhsachtimduoc").html("");
		   	 	$("#danhsachtimduoc").css("display","none");	
  			}	
  			else
  			{
  	  			var errorLength = res.error_mes.length;
  	  	  		var tmpString="";
  	  			if (errorLength <= 1) 
  	  	  			tmpString = res.error_mes;
  	  			else
  	  			{	  	  	  		
  	  	  			for(i=0;i<errorLength;i++)
  	  	  			{
  	  	  	  			tmpString = tmpString + "<p>"+res.error_mes[i]+"</p>";
  	  	  			}
  	  			}  	  	  			
  	  	  		$("#errorcustomer").html(tmpString);
  			}		   	 	
  		}				
	});
	$("#customerForm").validate({
		
		rules: {
				customer_birthday: "date"
	  	},
	  	messages: {
	  			customer_birthday: "Date format must be dd/mm/yyyy"
	  	},
	  	 	
	  	submitHandler: function() 
	  	{			
		  	$("#customerForm").ajaxSubmit(options);	
	  	}					  			
	});
	//-----------Xy ly su kien keypress trong employee txt
	$("input[name=txt_appoint_customer]:text").keyup(function(){
		var dataforsearch = $(this).val().toLowerCase();
		var json = '<?php echo $this->customer_list_json?>';
		var custlist = eval(json);
		//alert(employlist[0].customer_fname);
		//Tien hanh tim kiem
		var result_id = "",i;
		for (i=0;i<custlist.length;i++){
			//Kiem tra Fname
			if (custlist[i].customer_fname != null) { 
				var matchData = custlist[i].customer_fname.toLowerCase().match(dataforsearch); 
				if (matchData!=null){
					result_id += custlist[i].customer_id+'~';
				} 
			}
			
			//Kiem tra Lname 
			if (custlist[i].customer_lname != null) { 
				var matchData = custlist[i].customer_lname.toLowerCase().match(dataforsearch); 
				if (matchData!=null){
					result_id += custlist[i].customer_id+'~';
				}
			}
			
			//Kiem tra Email 
			if (custlist[i].customer_email != null) { 
				var matchData = custlist[i].customer_email.toLowerCase().match(dataforsearch); 
				if (matchData!=null){
					result_id += custlist[i].customer_id+'~';
				}
			}
			
			//Kiem tra Phone 
			if (custlist[i].customer_phone != null){
				var tmp = custlist[i].customer_phone.replace(/-/g,"");
				var matchData = tmp.match(dataforsearch); 
				if (matchData!=null){
					result_id += custlist[i].customer_id+'~';
				}
			}
		}
		
		result_id = result_id.substring(0,result_id.length-1);
		if (result_id.trim() != "") {
			result_id_array = result_id.split('~');
			var last_result = new Array();
			last_result[0] = result_id_array[0]; 		
			var k = 0,i; 
			for (i = 0; i < result_id_array.length ; i++){
				var lengthtmp = last_result.length;
				var notIn = true;
				//Kiem tra phan tu i co nam trong last_resule;
				for (j = 0; j < lengthtmp ; j++){
					if (result_id_array[i] == last_result[j]) {
						notIn = false;
						break;
					} 
				}
				if (notIn == true) {
					k++;
					last_result[k] = result_id_array[i];
				} 
			}
			//Xy ly de them vao table
			$("#danhsachtimduoc").html("<tr><th></th><th>Name</th><th>Phone</th><th>Email</th></tr>");
			$("#danhsachtimduoc").css("display","");
			for (i=0;i<custlist.length;i++){
				var hasInList = false;
				for (j=0;j<last_result.length;j++)
				{
					if (last_result[j] == custlist[i].customer_id) {
						hasInList = true;break;
					}
				}
				if (hasInList == true) {
					var tmpString = "<tr>";
					tmpString += "<td><input type=\"radio\" value=\""+custlist[i].customer_id+"\" onclick=\"renderadio_id(this);\" name=\"customer_id_radio\"></td>";
					tmpString += "<td>"+render(custlist[i].customer_fname)+" "+render(custlist[i].customer_lname) +"</td>";
					tmpString += "<td>"+render(custlist[i].customer_phone)+"</td>";
					tmpString += "<td>"+render(custlist[i].customer_email)+"</td>";
					tmpString += "</tr>";
					$("#danhsachtimduoc").append(tmpString);
				}
			}
			$("#foundlabel").html("Found Customer");
		} else {
			$("#foundlabel").html("Not Found Add Customer");	
			$("#danhsachtimduoc").css("display","none");		
		}
	});
	function render(value){
		if (value == null) return "";
		return value;
	}
	//-------------------------------

        $(".showcasecalender").click(function(){
            var showtype = $(this).attr('id');
            var dateOb = $(":date").val();
           
            if (showtype == 'showbycustomer'){         
		url = '<?php echo $this->baseUrl()?>/index/showlistbydate?date='+dateOb;
		$.get(
			    url,
				function(data) {
					$('#bookinglist').html(data);
				},
			    "html"
		);
            }else{
                url = '<?php echo $this->baseUrl()?>/index/showlistbytime?date='+dateOb;
		$.get(
			    url,
				function(data) {
					$('#bookinglist').html(data);
				},
			    "html"
		);
            }

        });
</script>